<template>
    <div class="app-container" :v-loading="loading">
      <el-dialog :title="新增" :visible="dialogVisible" width="520px" >
        <x-form ref="xForm" v-model="formData" :config="formConfig" />
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        loading: 0,
        dialogVisible: true,
        formData: {
          status: 'enable'  // 默认数据
        },
        treeData: [{
          id: "1",
          name: "xx公司",
          children: [
            {
              id: "2",
              name: "技术部",
              children: [
                { id: "4", name: "Java 组" },
                { id: "5", name: "Web 组" },
                { id: "6", name: "PHP 组" },
                { id: "7", name: "Python 组" }
              ]
            },
            { id: "3", name: "售后部" }
          ]
        }]
      }
    },
    computed: {
      formConfig() {
        const _this = this
        return {
          inline: false,
          item: [
            {
              xType: 'input',
              name: 'username',
              label: '登录名',
              tooltip: '登录名的<br />提示信息',
              rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
            },
            {
              xType: 'datePicker',
              type: 'date',
              name: 'birthday',
              label: '生日',
              rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }] },
            {
              xType: 'select',
              type: 'tree',
              name: 'deptId',
              label: '部门', dic: { data: _this.treeData, label: 'name', value: 'id'},
              rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] } ]
            },
            {
              xType: 'select',
              type: 'tree',
              name: 'deptId2',
              label: '部门多选',
              multiple: true,
              dic: { data: _this.treeData, label: 'name', value: 'id'},
              rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] } ]
            },
            {
              xType: 'input',
              name: 'phone',
              label: '手机号',
              rules: [ { required: true, pattern: /^1[3-9][0-9]{9}$/, message: '请输入正确的手机号', trigger: ['blur', 'change'] }]
            },
            {
              xType: 'input',
              name: 'email',
              label: '邮箱',
              rules: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
            },
            {
              xType: 'select',
              name: 'sex',
              label: '性别',
              dic: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }]
            },
            {
              xType: 'select',
              name: 'sex2',
              label: '自定义下拉',
              dic: {data: [{id: 1, name: "男男"}], label: 'name', value: 'id'}
            },
            {
              xType: 'radio',
              name: 'status',
              label: '状态',
              dic: [ { label: '激活', value: 'enable' }, { label: '锁定', value: 'disable' }]
            },
            {
              xType: 'checkbox',
              name: 'hobby',
              label: '爱好',
              dic: [ { label: '篮球', value: 'basketball' }, { label: '足球', value: 'football' }]
            },
            {
              xType: "input",
              type: 'password',
              name: "password",
              label: '密码'
            },
            {
              xType: 'input',
              type: 'textarea',
              name: 'remark',
              label: '备注'
            }
          ],
          operate: [
            { text: '保存', show: true, click: _this.save },
            { text: '取消', show: true, click: () => console.log('cancel') }
          ]
        }
      }
    },
    methods: {
      save() {
        this.loading++;
        this.$refs['xForm'].validate().then(() => {
          console.log(this.formData)
        }).catch(e => console.error(e)).finally(() => this.loading--)
      }
    }
  }
  </script>